<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b style="font-family: '微软雅黑';color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">添加班级</b>
              </div>
            </el-col>
          </el-row>
          <div>
            <div style="height: 300px; width: 600px;margin: 0 100px; border: 1px solid #eee">
              <el-form :model="classroom" :rules="rules" ref="classroom" style="margin: 10px auto;" label-width="100px" class="demo-ruleForm">
                <el-form-item label="班级名称" prop="classroomName">
                  <el-input v-model="classroom.classroomName"></el-input>
                </el-form-item>
                <el-form-item label="班级人数" prop="classroomPeopleNum">
                  <el-input v-model="classroom.classroomPeopleNum"></el-input>
                </el-form-item>
                <el-form-item label="班级描述" prop="classroomDescribe">
                  <el-input v-model="classroom.classroomDescribe"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('classroom')">立即创建</el-button>
                  <el-button @click="resetForm('classroom')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from '@/components/teacherSide/left'
import Top from '@/components/teacherSide/top'

export default {
  name: 'teacherAddClass',
  data () {
    return {
      teacherId: '',
      classroom: {
        classroomName: '',
        classroomPeopleNum: '',
        classroomDescribe: ''
      },
      rules: {
        classroomName: [
          { required: true, message: '请输入班级名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        classroomPeopleNum: [
          { required: true, message: '请输入班级人数', trigger: 'blur' },
          { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
        ],
        classroomDescribe: [
          { required: false, message: '请输入班级描述', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.teacherId = JSON.parse(localStorage.getItem('teacher')).teacherId
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8888/teacherCreateClassroom/' + this.teacherId, this.classroom).then(res => {
            if (res.data.flag && res.data.data === 'success') {
              this.$message({
                message: '恭喜你，班级创建成功',
                type: 'success'
              })
              this.classroom.classroomPeopleNum = ''
              this.classroom.classroomDescribe = ''
              this.classroom.classroomName = ''
            } else if (res.data.flag === false && res.data.data === 'err') {
              this.$message({
                message: '警告哦，您已创建该班级，无法重复创建',
                type: 'warning'
              })
              this.classroom.classroomName = ''
            }
          }).catch(err => {
            this.$message.error('错了哦，数据错误，班级创建失败')
            return Promise.reject(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  components: {
    Left,
    Top
  }
}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #42b983;
  }
</style>
<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }
  a{
    text-decoration: none;
    color: cadetblue;
  }
</style>
